<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ resource }}YAML编辑</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<!-- 必须设置高度，否则无法显示-->
<div id="code-editor" style="height: 98%;width: 98%;"></div>


<script src="/static/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/ace/theme/theme-chrome.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/ace/mode/mode-yaml.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/layui/layui.js"></script>
{% csrf_token %}
<script>
    //初始化对象
    var editor = ace.edit("code-editor");
    //设置编辑器样式,对应theme-*.js
    editor.setTheme("ace/theme/chrome");
    //设置代码器语言，对应mode-*.js文件
    editor.session.setMode("ace/mode/yaml");
    //设置打印线是否显示
    editor.setShowPrintMargin(false);
    //字体大小
    editor.setFontSize(16);
    //设置只读
    editor.setReadOnly(false);

    layui.use(['layer'], function () {
        const $ = layui.jquery;
        layer = layui.layer;

        var namespace = "{{ data.namespace }}";
        var resource = "{{ data.resource }}";
        var name = "{{ data.name }}";

        $.ajax({
            url: '{% url "export_resource_api" %}?' + 'namespace=' + namespace + '&resource=' + resource + '&name=' + name,
            type: 'GET',
            //提交成功回调函数
            success: function (res) {
                if (res.code == '0') {
                    editor.setValue(res.data);
                } else {
                    layer.msg(res.msg, {icon: 5})
                }
            },
            error: function (res) {
                layer.msg("服务器接口异常！", {icon: 5})
            }
        })
    })
</script>
</body>
</html>